<template>
  <div class="formBox">
    <!-- 通用场景 -->
    <div v-show="deviceData.app_scene==1" v-loading="loading1" element-loading-text="正在读取参数,请稍等..."
      element-loading-spinner="el-icon-loading">
      <el-form :model="argForm" class="argForm" inline label-width="100px">
        <el-form-item  label="上报方式:">
         <!-- <div class="switchBox">
           <el-switch class="mar_report" v-model="argForm.fixed_report" :width="stateWidth" active-color="#13ce66"
            inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one" :inactive-value="zero">
          </el-switch>
          </div> -->
          <!-- <el-radio-group v-model="argForm.fixed_report" style="vertical-align: middle;margin-top:0.15rem;">
            <el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
            <el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group> -->
          <el-select v-model="argForm.fixed_report" placeholder="上报方式" class="inpu" style="width:3rem;">
          	<el-option v-for="item in reportTypes" :key="item.value" :label="item.label"
          		:value="item.value">
          	</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间:" v-if="argForm.fixed_report==1">
          <el-time-select :clearable="false" class="timeSelect" style="width:3rem;margin-right:4px;"
            v-model="argForm.fixed_start_time" :picker-options="{
         				start: '00:00',
         				step: '00:05',
         				end: '23:55'
         			  }" placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item  label="上报频率:">
          <el-input class="inpu" style="width: 3rem;margin-right:4px;" v-model="argForm.report_interval"
            placeholder="请输上报频率"></el-input><span>{{argForm.fixed_report==1?'min':'s'}}</span>
        </el-form-item>
        <!-- <el-form-item v-else label="上报频率:">
          <el-input class="inpu" style="width: 2.5rem;margin-right:4px;" v-model="argForm.report_interval"
            placeholder="请输上报频率"></el-input>s
        </el-form-item> -->


      </el-form>
      <div style="text-align:left; margin-top: 0.2rem;margin-left:0.6rem;">
        <el-button type="primary" :disabled="isOn==0" size="small" @click="readArgs">读 取</el-button>
        <el-button type="primary" size="small" @click="saveArgs">保存</el-button>
        <el-button type="primary" :disabled="isOn==0" size="small" @click="setArgs">保存并下发</el-button>
        <!-- <el-button size="small" @click="cancelSetArgs">取 消</el-button> -->
      </div>
    </div>
    <!-- 水利应用场景 -->
    <div v-if="deviceData.app_scene==2" v-loading="loading2" element-loading-text="正在读取参数,请稍等..."
      element-loading-spinner="el-icon-loading">
      <el-form :model="argForm_2" class="argForm" inline label-width="100px">

        <el-form-item  label="" style="height:0.5rem;">
          <span style="font-size:0.3rem;color:#111;font-weight:700;">管理平台:</span>
        </el-form-item></br>
        <el-form-item  label="上报方式:"
          label-position="left" >
          <!-- <div class="switchBox">
          <el-switch class="mar_report" v-model="argForm_2.fixed_report" :width="stateWidth" active-color="#13ce66"
            inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one" :inactive-value="zero">
          </el-switch>
          </div> -->
          <!-- <el-radio-group v-model="argForm_2.fixed_report" style="vertical-align: middle;margin-top:0.28rem;">
            <el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
            <el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group> -->
          <el-select v-model="argForm_2.fixed_report" placeholder="上报方式" class="inpu" style="width:3rem;">
          	<el-option v-for="item in reportTypes" :key="item.value" :label="item.label"
          		:value="item.value">
          	</el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="argForm_2.fixed_report==1" label="起始时间:"
           label-position="left" >
          <el-time-select :clearable="false" class="timeSelect" style="width: 3rem;margin-right:4px;"
            v-model="argForm_2.fixed_start_time" :picker-options="{
        				start: '00:00',
        				step: '00:05',
        				end: '23:55'
        			  }" placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item  label="上报频率:"
          label-position="left"
          >
          <el-input class="inpu" style="width:3rem;margin-right:4px;" v-model="argForm_2.report_interval"
            placeholder="请输上报频率"></el-input><span>{{argForm_2.fixed_report==1?'min':'s'}}</span>
        </el-form-item>
        <!-- <el-form-item v-else label="上报频率(管理平台):"  label-position="left" >
          <el-input class="inpu" style="width:2rem;margin-right:4px;" v-model="argForm_2.report_interval"
            placeholder="请输上报频率"></el-input>s
        </el-form-item> -->
        <el-form-item label="" >
          <el-button type="primary" size="mini" @click="setArgs_Interval('platform')"
            style="margin-left:0.2rem;margin-top:0.3rem;">修改</el-button>
        </el-form-item><br>
        <el-form-item  label=""  style="height:0.5rem;">
          <span style="font-size:0.3rem;color:#111;font-weight:700;">遥测平台:</span>
        </el-form-item></br>
        <el-form-item  label="上报方式:"
          label-position="left" >
          <!-- <div class="switchBox">
          <el-switch class="mar_report" v-model="argForm_2.tcp_service.fixed_report" :width="stateWidth"
            active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用" :active-value="one"
            :inactive-value="zero">
          </el-switch>
          </div> -->
          <!-- <el-radio-group v-model="argForm_2.tcp_service.fixed_report" style="vertical-align: middle;margin-top:0.28rem;">
            <el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
            <el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group> -->
          <el-select v-model="argForm_2.tcp_service.fixed_report" placeholder="上报方式" class="inpu" style="width:3rem;">
          	<el-option v-for="item in reportTypes" :key="item.value" :label="item.label"
          		:value="item.value">
          	</el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="argForm_2.tcp_service.fixed_report==1"
          label="起始时间:"  label-position="left" >
          <el-time-select :clearable="false" class="timeSelect" style="width: 3rem;margin-right:4px;"
            v-model="argForm_2.tcp_service.fixed_start_time" :picker-options="{
        				start: '00:00',
        				step: '00:05',
        				end: '23:55'
        			  }" placeholder="选择时间">
          </el-time-select>
        </el-form-item>
        <el-form-item  label="上报频率:"
          label-position="left"
          >
          <el-input class="inpu" style="width:3rem;margin-right:0;" v-model="argForm_2.tcp_service.report_interval"
            placeholder="请输TCP上报频率"></el-input>
          <span>{{argForm_2.tcp_service.fixed_report==1?'min':'s'}}</span>
        </el-form-item>
       <!-- <el-form-item v-else label="上报频率(遥测平台):"  label-position="left" >
          <el-input class="inpu" style="width:2rem;margin-right:4px;" v-model="argForm_2.tcp_service.report_interval"
            placeholder="请输TCP上报频率"></el-input>s
        </el-form-item> -->
        <el-form-item label="" >
          <el-button type="primary" size="mini" @click="setArgs_Interval('remote')"
            style="margin-left:0.2rem;margin-top:0.3rem;">修改</el-button>
        </el-form-item><br>
        <el-form-item label="RTU编码:"  label-position="left">
          <el-input class="inpu" style="width:8.85rem;margin-right:4px;" v-model="argForm_2.tcp_service.rtu_code"
            placeholder="请输RTU编码"></el-input>
        </el-form-item></br>
        <el-form-item  label="" style="height:0.5rem;">
          <span style="font-size:0.3rem;color:#111;font-weight:700;">服务器:</span>
        </el-form-item>
      </el-form>

      <div class="sensorHead" style="text-align: left;margin-left:4px;">
        <span class="inpu_4" style="width:1.8rem;">序列</span>
        <span class="inpu_4" style="width:5rem;">IP地址或域名</span>
        <span class="inpu_4" style="width:2.1rem;margin-left:0.2rem;">端口</span>
        <span class="inpu_4" style="width:2.1rem;margin-left:0.2rem;">使能</span>
        <div  class="inpu_4" style="width:2.2rem;font-size: 0.3rem;margin-left:0.2rem;"><span>状态</span> | <span style="color:deepskyblue;cursor: pointer;"
            @click="refreshServiceState">刷新</span></div>
        <!-- <el-button class="inpu_4" style="width:1.4rem;">状态</el-button> -->
      </div>
      <div style="min-height:1rem;height:auto;width:60%;overflow:visible;text-align:left;">
        <div v-for="(item,n) in argForm_2.tcp_service.servers" :key="n" class="oneSensor">
          <span class="inpu_2" style="width:2rem;border:none;">服务器{{n+1}}:</span>
          <input class="inpu_2" style="width:5rem" v-model="item.ip"></input>
          <input class="inpu_2" style="width:2rem;margin-left:0.2rem;" v-model="item.port"></input>
          <span class="inpu_2" style="width:2.2rem;position:relative;margin-left:0.2rem;overflow:hidden;border: none;">
            <el-switch class="mar_l" v-model="item.enable" :width="stateWidth" active-color="#13ce66"
              inactive-color="#ccc" active-text="启用" inactive-text="停用" :active-value="one" :inactive-value="zero">
            </el-switch>
          </span>
          <div class="inpu_2" style="width:1rem;border:none;margin-left:0.65rem;">
            <span :class="item.state==1?'yes':'no_grey'"></span>
          </div>
        </div>
      </div>
      <div style="text-align:left; margin-top: 0.1rem;margin-left: 0.6rem;">
        <el-button type="primary" :disabled="isOn==0" size="small" @click="readArgs_2">读 取</el-button>
        <el-button type="primary" size="small" @click="saveArgs_2">保存</el-button>
        <el-button type="primary" :disabled="isOn==0" size="small" @click="setArgs_2">保存并下发</el-button>
        <!-- <el-button size="small" @click="cancelSetArgs_2">取 消</el-button> -->
      </div>
    </div>
    <!-- MQTT遥测 -->
    <div v-if="deviceData.app_scene==5" v-loading="loading2" element-loading-text="正在读取参数,请稍等..."
      element-loading-spinner="el-icon-loading">
      <el-form :model="argForm_5" class="argForm" style="text-align: left;margin-top:0.1rem;" inline>
      	<!-- <div style="margin-left:0.2rem;color:red;font-size:0.3rem;">注:运行模式由边缘采集改为数据透传后,原来的子设备和数据点将丢失,请慎重操作！</div> -->
        <el-form-item label="运行模式:">
      		<el-select v-model="argForm_5.run_mode" placeholder="运行模式" class="inpu" style="width:2.5rem;">
      			<el-option v-for="item in runModes" :key="item.value" :label="item.label"
      				:value="item.value">
      			</el-option>
      		</el-select>
          <span
          	style="display:inline-block;vertical-align:bottom;margin-left:0.2rem;color:red;font-size:0.3rem;">注:运行模式由边缘采集改为数据透传后,原来的子设备和数据点将丢失,请慎重操作！</span>
      	</el-form-item><br>
      	<el-form-item  label="" >
      		<span style="display:inline-block;margin-top:0.05rem;font-size:0.3rem;color:#111;font-weight:700;">管理平台:</span>
      	</el-form-item>
      	<el-form-item  label="上报方式:"
      		label-width="auto" label-position="left" >
          <!-- <div style="width:80px;overflow:hidden;">
      		<el-switch class="mar_report" v-model="argForm_5.fixed_report" :width="stateWidth"
      			active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用"
      			:active-value="one" :inactive-value="zero">
      		</el-switch>
          </div> -->
         <!-- <el-radio-group v-model="argForm_5.fixed_report" style="vertical-align: middle;margin-top:0.25rem;">
          	<el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
          	<el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group> -->
          <el-select v-model="argForm_5.fixed_report" placeholder="上报方式" class="inpu" style="width:3rem;">
          	<el-option v-for="item in reportTypes" :key="item.value" :label="item.label"
          		:value="item.value">
          	</el-option>
          </el-select>

      	</el-form-item>
      	<el-form-item v-if="argForm_5.fixed_report==1"
      		label="起始时间:" label-width="auto" label-position="left"
      		style="display:inline-block;">
      		<el-time-select class="timeSelect" style="width: 3rem;margin-right:4px;" :clearable="false" v-model="argForm_5.fixed_start_time"
      			:picker-options="{
      			start: '00:00',
      			step: '00:05',
      			end: '23:55'
      		  }" placeholder="选择时间">
      		</el-time-select>
      	</el-form-item>
      	<el-form-item  label="上报频率:"
      		label-width="auto" label-position="left" :class="argForm_5.fixed_report==0?'reportInterval':''"
      		>
      		<el-input class="inpu" style="width:3rem;margin-right:4px;" v-model="argForm_5.report_interval"
      			placeholder="请输上报频率"></el-input><span>{{argForm_5.fixed_report==1?'min':'s'}}</span>
      	</el-form-item>
      	<!-- <el-form-item v-else label="上报频率(管理平台):" label-width="auto" label-position="left"
      		style="margin-top:-0.2rem;">
      		<el-input class="inpu" style="width:2rem;margin-right:4px;" v-model="argForm_5.report_interval"
      			placeholder="请输上报频率"></el-input>s
      	</el-form-item> -->
      	<el-form-item label="" style="">
      		<el-button type="primary" size="mini" @click="setMqttInterval('platform')"
      			style="margin-left:0.1rem;margin-top:0.2rem;">修改</el-button>
      	</el-form-item><br>
      	<el-form-item  label="">
      		<span style="display:inline-block;margin-top:0.05rem;font-size:0.3rem;color:#111;font-weight:700;">遥测平台:</span>
      	</el-form-item>
      	<el-form-item  label="上报方式:"
      		label-width="auto" label-position="left" >
      		<!-- <div style="width:80px;overflow:hidden;">
          <el-switch class="mar_report" v-model="argForm_5.mqtt_service.fixed_report" :width="stateWidth"
      			active-color="#13ce66" inactive-color="#ccc" active-text="启用" inactive-text="禁用"
      			:active-value="one" :inactive-value="zero">
      		</el-switch>
          </div> -->
          <!-- <el-radio-group v-model="argForm_5.mqtt_service.fixed_report" style="vertical-align: middle;margin-top:0.25rem;">
          	<el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
          	<el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group> -->
          <el-select v-model="argForm_5.mqtt_service.fixed_report" placeholder="上报方式" class="inpu" style="width:3rem;">
          	<el-option v-for="item in reportTypes" :key="item.value" :label="item.label"
          		:value="item.value">
          	</el-option>
          </el-select>
      	</el-form-item>
      	<el-form-item
      		v-if="argForm_5.mqtt_service.fixed_report==1"
      		label="起始时间:" label-width="auto" label-position="left"
      		>
      		<el-time-select class="timeSelect" style="width:3rem;margin-right:4px;"  :clearable="false"
      		 v-model="argForm_5.mqtt_service.fixed_start_time" :picker-options="{
      			start: '00:00',
      			step: '00:05',
      			end: '23:55'
      		  }" placeholder="选择时间">
      		</el-time-select>
      	</el-form-item>
      	<el-form-item  label="上报频率:"
      		label-width="auto" label-position="left"
      		:class="argForm_5.mqtt_service.fixed_report==0?'reportInterval':''"
      		>
      		<el-input class="inpu" style="width:3rem;margin-right:0;"
      			v-model="argForm_5.mqtt_service.report_interval" placeholder="请输TCP上报频率"></el-input>
      		<span>{{argForm_5.mqtt_service.fixed_report==1?'min':'s'}}</span>
      	</el-form-item>
      	<!-- <el-form-item v-else label="上报频率(遥测平台):" label-width="auto" label-position="left"
      		style="margin-top:-0.2rem;">
      		<el-input class="inpu" style="width:2rem;margin-right:4px;"
      			v-model="argForm_5.mqtt_service.report_interval" placeholder="请输TCP上报频率"></el-input>s
      	</el-form-item> -->
      	<el-form-item label="" >
      		<el-button type="primary" size="mini" @click="setMqttInterval('remote')"
      			style="margin-left:0.1rem;margin-top: 0.2rem;">修改</el-button>
      	</el-form-item><br>
      	<el-form-item label="RTU编码:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-right:4px;" v-model="argForm_5.rtu_code"
      			placeholder="请输RTU编码"></el-input>
      	</el-form-item>

      	<div class="bottom_top" @click="changeMqttBox">
      		<div class="argment" id="argment"  :class="mqttBox=='argment'?'cardActive':''">MQTT连接参数</div>
      		<div v-if="argForm_5.mqtt_service.topics" class="topic" id="topic"     :class="mqttBox=='topic'?'cardActive':''">MQTT配置主题</div>
      	</div>

      	<div v-show="mqttBox=='argment'" style="margin-top:-0.1rem;">
      	<el-form-item label="主机地址:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-right:4px;" v-model="argForm_5.mqtt_service.host"
      			placeholder="请输入主机地址"></el-input>
      	</el-form-item>
      	<el-form-item label="端口:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:3rem;margin-right:4px;" v-model="argForm_5.mqtt_service.port"
      			placeholder="请输入端口号"></el-input>
      	</el-form-item>
      	<el-form-item label="保活时间:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:3rem;margin-right:4px;" v-model="argForm_5.mqtt_service.alive_time"
      			placeholder="单位秒"></el-input>s
      	</el-form-item><br>
      	<el-form-item label="客户端ID:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-right:4px;" v-model="argForm_5.mqtt_service.client_id"
      			placeholder="请输入客户端ID"></el-input>
      	</el-form-item>
      	<el-form-item label="账号:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:3rem;margin-right:4px;" v-model="argForm_5.mqtt_service.username"
      			placeholder="请输入账号名称"></el-input>
      	</el-form-item>
      	<el-form-item label="　　密码:" label-width="auto" label-position="left"
      		style="position:relative;">
      		<el-input class="inpu" type="password" id="secretMqtt" style="width:3rem;margin-right:4px;" v-model="argForm_5.mqtt_service.password"
      			placeholder="请输入密码"></el-input>
      		<i class="el-icon-view letLook" @click="showSecretMqtt"></i>
      	</el-form-item><br>
      	<el-form-item label="　　使能:" label-width="auto" label-position="left"
      		>
      		<!-- <div style="width:80px;overflow:hidden;">
      		<el-switch class="mar_report" v-model="argForm_5.mqtt_service.enable" :width="stateWidth" active-color="#13ce66"
      			inactive-color="#ccc" active-text="启用" inactive-text="停用" :active-value="one"
      			:inactive-value="zero">
      		</el-switch>
      		</div> -->
          <el-radio-group v-model="argForm_5.mqtt_service.enable" style="vertical-align: middle;margin-top:0.1rem;">
          	<el-radio :label="1" style="font-size:0.3rem;">启用</el-radio>
          	<el-radio :label="0" style="font-size:0.3rem;">禁用</el-radio>
          </el-radio-group>
      	</el-form-item>
      	<el-form-item label="状态:" label-width="auto" label-position="left">
      		<span :class="argForm_5.mqtt_service.state==1?'yes':'no_grey'" style="margin-top:0.15rem;"></span>
      	</el-form-item>
      	</div>

      	<div v-if="mqttBox=='topic'" style="margin-top:-0.1rem;">
      	<el-form-item label="数据上报:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-right:4px;" v-model="argForm_5.mqtt_service.topics.report"
      			placeholder="数据上报主题"></el-input>
      	</el-form-item>
      	<el-form-item  label="上报返回:" label-width="100px" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-left:6px;" v-model="argForm_5.mqtt_service.topics.report_ack"
      			placeholder="上报返回主题"></el-input>
      	</el-form-item><br>
      	<el-form-item label="数据下发:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-right:4px;" v-model="argForm_5.mqtt_service.topics.write"
      			placeholder="数据下发主题"></el-input>
      	</el-form-item>
      	<el-form-item label="下发返回:" label-width="100px" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-left:6px;" v-model="argForm_5.mqtt_service.topics.write_ack"
      			placeholder="下发返回主题"></el-input>
      	</el-form-item><br>
      	<el-form-item label="　  主题1:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-left:2px;" v-model="argForm_5.mqtt_service.topics.topic1"
      			placeholder="主题1"></el-input>
      	</el-form-item>
      	<el-form-item label="主题1返回:" label-width="100px" label-position="right"
      		>
      		<el-input class="inpu"  id="secretMqtt" style="width:5rem;" v-model="argForm_5.mqtt_service.topics.topic1_ack"
      			placeholder="主题1返回"></el-input>
      	</el-form-item><br>
      	<el-form-item label="　 主题2:" label-width="auto" label-position="left"
      		>
      		<el-input class="inpu" style="width:5rem;margin-left:2px;" v-model="argForm_5.mqtt_service.topics.topic2"
      			placeholder="主题2"></el-input>
      	</el-form-item>
      	<el-form-item label="主题2返回:" label-width="100px" label-position="right"
      		>
      		<el-input class="inpu"  id="secretMqtt" style="width:5rem;" v-model="argForm_5.mqtt_service.topics.topic2_ack"
      			placeholder="主题2返回"></el-input>
      	</el-form-item>
      	</div>
      </el-form>
      <div style="text-align:left;margin-left: 0.6rem; margin-top: 0.1rem">
      	<el-button type="primary" size="small" @click="readArgs_5">读 取</el-button>
        <el-button type="primary" size="small" @click="saveArgs_5">保存</el-button>
      	<el-button type="primary" size="small" @click="setArgs_5">保存并下发</el-button>
      	<!-- <el-button size="small" @click="cancelSetArgs_5">取 消</el-button> -->
      </div>


    </div>

  </div>
</template>

<script>
  import {
    versionToFloat
  } from '../common.js';
  export default {
    name: 'ArgmentSet',
    data() {
      return {
        stateWidth: 70,
        formLabelWidth2: '100px',
        formLabelWidth: '160px',
        loading1:false,
        loading2:false,
        loading5: false,
        one: 1,
        zero: 0,
        versionToFloat: versionToFloat,
        //通用场景参数
        argForm: {
          firmware_version: '',
          report_interval: 60,
          fixed_report: 0, // 定点上报
          fixed_start_time: "08:00", // 起始时间
          //run_mode: 1
        },

        reportTypes:[{
        	value:0,
        	label:"周期上报"
        },{
        	value:1,
        	label:"定时定点上报"
        }
        ],
        //水利场景参数
        argForm_2: {
          firmware_version: '',
          report_interval: 60,
          fixed_report: 0, // 定点上报
          fixed_start_time: "08:00", // 起始时间
          run_mode: 1,
          tcp_service: {
            fixed_report: 1, // 定点上报
            fixed_start_time: "08:00", // 起始时间
            report_interval: 60,
            rtu_code: '', //RTU编码
            servers: []
          }
        },
        //MQTT遥测
        mqttBox:'argment',
        argForm_5: {
        	firmware_version: '',
        	report_interval: 60,
        	fixed_report: 0, // 定点上报
        	fixed_start_time: "08:00", // 起始时间
        	run_mode: 1,
        	rtu_code: '', //RTU编码
        	mqtt_service: {
        		fixed_report: 1, // 定点上报
        		fixed_start_time: "08:00", // 起始时间
        		report_interval: 60,
        	    host:"",            //主机地址,
        		port:"",            //端口,
        		client_id:"",       //客户端ID,
        		alive_time:"",      //保活时间,
        		username:"",        //账号,
        		password:"",        //密码,
        		state:0,            //状态
        		topics:{
        		    "report":"",          //"数据上报",
        		    "report_ack":"",      //"上报返回",
        		    "write":"",           //"数据下发",
        		    "write_ack":"",       //"下发返回",
        		    "topic1":"",          //"主题1",
        		    "topic1_ack":"",      // "主题1返回",
        		    "topic2":"",          //"主题1",
        		    "topic2_ack":""       //"主题2返回"
        		}

        	}
        },
        runModes: [{
        		value: 1,
        		label: '边缘采集'
        	},
        	{
        		value: 2,
        		label: '数据透传'
        	}
        ],
        equipInfo: {

        }
      }
    },
    props: ['deviceData','isOn'],
    created() {
      this.getEquipInfo(this.deviceData.id);
    },
    methods: {
      getEquipInfo(id) {
        this.$http({
          method: 'post',
          url: 'api/equip/info',
          data: {
            "id": id
          }
        }).then(res => {
          if (res && res.data.result == "success") {
              this.equipInfo = res.data.data;
              this.showArgs(this.equipInfo);
          }
        }).catch(error => {
          console.log(error);
        });
      },

      showArgs(row) {
        if (row.app_scene == 1) {
          this.argForm.firmware_version = row.firmware_version || 0;
          this.argForm.report_interval = row.report_interval;
          //if (this.versionToFloat(row.firmware_version) >= 5.3) {
            this.argForm.fixed_report = row.fixed_report || 0;
            this.argForm.fixed_start_time = row.fixed_start_time || "08:00";
          //}
          this.argForm.run_mode = Number(row.run_mode);

        } else if (row.app_scene == 2) {
          this.argForm_2.firmware_version = row.firmware_version || 0;
          this.argForm_2.report_interval = row.report_interval;
          this.argForm_2.rtu_code = row.rtu_code;
          //if (this.versionToFloat(row.firmware_version) >= 5.3) {
            this.argForm_2.fixed_report = row.fixed_report || 0;
            this.argForm_2.fixed_start_time = row.fixed_start_time || "08:00";
          //}
          this.argForm_2.run_mode = Number(row.run_mode);
          //if (row.tcp_service && row.tcp_service.servers) {
            this.argForm_2.tcp_service = {
              fixed_report: 0,
              fixed_start_time: "08:00",
              report_interval: 300,
              servers: [{ip: "47.111.139.26", port: 8888, enable: 1, state: 1},{ip: "47.111.139.26", port: 8888, enable: 1, state: 1}]
            };
            // this.argForm_2.tcp_service = Object.assign({}, row.tcp_service);
            // this.argForm_2.tcp_service.servers = Array.from(row.tcp_service.servers);
            // for (let i = 0, len = row.tcp_service.servers.length; i < len; i++) {
            //   this.argForm_2.tcp_service.servers[i] = Object.assign({}, row.tcp_service.servers[i]);
            // }
          //} else {
            //						this.$message({
            //							type: 'info',
            //						    message:'暂无TCP服务器相关参数！'
            //						})
          //}

        }else if(row.app_scene == 5){
            console.log("5");
            this.argForm_5.firmware_version = row.firmware_version || 0;
            //this.argForm_5.firmware_version = "5.5.0";
            this.argForm_5.report_interval = row.report_interval;
            this.argForm_5.rtu_code = row.rtu_code;
            //if (this.versionToFloat(row.firmware_version) >= 5.3) {
            	this.argForm_5.fixed_report = row.fixed_report || 0;
            	this.argForm_5.fixed_start_time = row.fixed_start_time || "08:00";
            //}
            this.argForm_5.run_mode = Number(row.run_mode);
            if (row.mqtt_service) {
            	this.argForm_5.mqtt_service = Object.assign({},row.mqtt_service);
            	if(row.mqtt_service.topics){
            		this.argForm_5.mqtt_service.topics = Object.assign({},row.mqtt_service.topics);
            	}else{
            		this.argForm_5.mqtt_service.topics = null;
            	}
            }else{
            	this.argForm_5.mqtt_service = {
            			fixed_report: 1, // 定点上报
            			fixed_start_time: "08:00", // 起始时间
            			report_interval: 60,
            			host:"",            //主机地址,
            			port:"",            //端口,
            			client_id:"",       //客户端ID,
            			alive_time:"",      //保活时间,
            			username:"",        //账号,
            			password:"",        //密码,
            			state:0             //状态

            	}
            }


        }
      },

      readArgs() {
        this.loading1 = true;
        this.$http({
          method: 'post',
          url: 'api/equip/remoteGet',
          data: {
            'id': this.deviceData.id,
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.argForm.report_interval = res.data.data.report_interval;
            this.argForm.fixed_report = Number(res.data.data.fixed_report);
            this.argForm.fixed_start_time = res.data.data.fixed_start_time;

            this.argForm.run_mode = Number(res.data.data.run_mode);
            this.loading1 = false;
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          } else {
            this.loading1 = false;
          }

        }).catch(error => {
          console.log(error);
        });
      },


      setArgs() {
        this.$http({
          method: 'post',
          url: 'api/equip/remoteSet',
          data:  {
            'id': this.deviceData.id,
            'run_mode': this.argForm.run_mode,
            'report_interval': this.argForm.report_interval,
            'fixed_report': this.argForm.fixed_report,
            'fixed_start_time': this.argForm.fixed_start_time
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: 'success',
              message: res.data.msg
            });

          }

        }).catch(error => {
          console.log(error);

        });
      },

      saveArgs() {
        this.$http({
          method: 'post',
          url: 'api/equip/saveParam',
          data:  {
            'id': this.deviceData.id,
            'run_mode': this.argForm.run_mode,
            'report_interval': this.argForm.report_interval,
            'fixed_report': this.argForm.fixed_report,
            'fixed_start_time': this.argForm.fixed_start_time
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: 'success',
              message: res.data.msg
            });

          }

        }).catch(error => {
          console.log(error);

        });
      },

      readArgs_2() {
        this.loading2 = true;
        this.$http({
          method: 'post',
          url: 'api/equip/remoteGet',
          data: {
            'id': this.deviceData.id,
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.argForm_2.report_interval = res.data.data.report_interval;
            this.argForm_2.rtu_code = res.data.data.rtu_code;
            this.argForm_2.fixed_report = Number(res.data.data.fixed_report);
            this.argForm_2.fixed_start_time = res.data.data.fixed_start_time;
            this.argForm_2.tcp_service = res.data.data.tcp_service;
            this.argForm_2.run_mode = Number(res.data.data.run_mode);
            this.loading2 = false;
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          } else {
            this.loading2 = false;
          }

        }).catch(error => {
          console.log(error);
        });
      },

      setArgs_2() {
        this.$http({
          method: 'post',
          url: 'api/equip/remoteSet',
          data:  {
            'id': this.deviceData.id,
            'run_mode': this.argForm_2.run_mode,
            'report_interval': this.argForm_2.report_interval,
            'rtu_code': this.argForm_2.rtu_code,
            'fixed_report': this.argForm_2.fixed_report,
            'fixed_start_time': this.argForm_2.fixed_start_time,
            'tcp_service': this.argForm_2.tcp_service
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: 'success',
              message: res.data.msg
            });

          }

        }).catch(error => {
          console.log(error);

        });
      },

      saveArgs_2() {
        this.$http({
          method: 'post',
          url: 'api/equip/saveParam',
          data:  {
            'id': this.deviceData.id,
            'run_mode': this.argForm_2.run_mode,
            'report_interval': this.argForm_2.report_interval,
            'rtu_code': this.argForm_2.rtu_code,
            'fixed_report': this.argForm_2.fixed_report,
            'fixed_start_time': this.argForm_2.fixed_start_time,
            'tcp_service': this.argForm_2.tcp_service
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: 'success',
              message: res.data.msg
            });

          }

        }).catch(error => {
          console.log(error);

        });
      },

      readArgs_5() {
      	this.loading5 = true;
      	this.$http({
      		method: 'post',
      		url: 'api/equip/remoteGet',
      		data: {
      			'id': this.deviceData.id,
      		}
      	}).then(res => {
      		if (res && res.data.result == "success") {
      			this.argForm_5.report_interval = res.data.data.report_interval;
      			this.argForm_5.rtu_code = res.data.data.rtu_code;
      			this.argForm_5.fixed_report = Number(res.data.data.fixed_report);
      			this.argForm_5.fixed_start_time = res.data.data.fixed_start_time;
      			this.argForm_5.mqtt_service = res.data.data.mqtt_service;
      			this.argForm_5.run_mode = Number(res.data.data.run_mode);
      			this.loading5 = false;
      			this.$message({
      				type: 'success',
      				message: res.data.msg
      			});
      		} else {
      			this.loading5 = false;
      		}

      	}).catch(error => {
      		console.log(error);
      		this.loading5 = false;
      	});
      },


      saveArgs_5(){
          this.$http({
          	method: 'post',
          	url: 'api/equip/saveParam',
          	data: this.versionToFloat(this.argForm_5.firmware_version) >= 5.3 ? {
          		'id': this.deviceData.id,
          		'run_mode': this.argForm_5.run_mode,
          		'report_interval': this.argForm_5.report_interval,
          		'rtu_code': this.argForm_5.rtu_code,
          		'fixed_report': this.argForm_5.fixed_report,
          		'fixed_start_time': this.argForm_5.fixed_start_time,
          		'mqtt_service': this.argForm_5.mqtt_service
          	} : {
          		'id': this.deviceData.id,
          		'run_mode': this.argForm_5.run_mode,
          		'report_interval': this.argForm_5.report_interval,
          		'rtu_code': this.argForm_5.rtu_code,
          		'mqtt_service': this.argForm_5.mqtt_service
          	}
          }).then(res => {
          	if (res && res.data.result == "success") {
          		this.$message({
          			type: 'success',
          			message: res.data.msg
          		});

          	}

          }).catch(error => {
          	console.log(error);

          });


      },
      // 屏蔽透传时启用下面的函数，否则启用上面的函数
      setArgs_5() {
      	this.$http({
      		method: 'post',
      		url: 'api/equip/remoteSet',
      		data: this.versionToFloat(this.argForm_5.firmware_version) >= 5.3 ? {
      			'id': this.deviceData.id,
      			'run_mode': this.argForm_5.run_mode,
      			'report_interval': this.argForm_5.report_interval,
      			'rtu_code': this.argForm_5.rtu_code,
      			'fixed_report': this.argForm_5.fixed_report,
      			'fixed_start_time': this.argForm_5.fixed_start_time,
      			'mqtt_service': this.argForm_5.mqtt_service
      		} : {
      			'id': this.deviceData.id,
      			'run_mode': this.argForm_5.run_mode,
      			'report_interval': this.argForm_5.report_interval,
      			'rtu_code': this.argForm_5.rtu_code,
      			'mqtt_service': this.argForm_5.mqtt_service
      		}
      	}).then(res => {
      		if (res && res.data.result == "success") {
      			this.$message({
      				type: 'success',
      				message: res.data.msg
      			});

      		}

      	}).catch(error => {
      		console.log(error);

      	});
      },

      showSecretMqtt(event) {
      	if (document.getElementById("secretMqtt").type == "password") {
      		document.getElementById("secretMqtt").type = "text";
      		event.target.style.color = "deepskyblue";
      	} else {
      		document.getElementById("secretMqtt").type = "password";
      		event.target.style.color = "#ccc";
      	}
      },

      changeMqttBox(event) {
          if (event.target.id) {
              this.mqttBox = event.target.id;
          } else {
              this.mqttBox = "argment";
          }
      },

      refreshServiceState() {
        //this.argForm_3.tcp_service.servers = [{ip:'192.168.0.119',port:'5030',enable:1,state:1}]
        this.$http({
            method: 'post',
            url: 'api/equip/info',
            data: {
              'id': this.deviceData.id
            }
          })
          .then(res => {
            if (res && res.data.result == "success") {
              if (res.data.data.tcp_service && res.data.data.tcp_service.servers.length) {
                this.argForm_2.tcp_service.servers = res.data.data.tcp_service.servers;
                this.$message({
                  type: 'info',
                  message: "已刷新服务器！"
                });
              }
            }
          }).catch(error => {
            console.log(error);
          });
      },

      //单独修改管理平台和遥测平台上报频率的函数；
      //interval为platform表示修改管理平台上报频率，为remote表示修改遥测平台上报频率
      setArgs_Interval(interval = 'platform') {
        var that = this;
        var data = {};
        if (interval != 'platform') {
          var service = {
            'fixed_report': that.argForm_2.tcp_service.fixed_report,
            'fixed_start_time': that.argForm_2.tcp_service.fixed_start_time,
            'report_interval': that.argForm_2.tcp_service.report_interval
          };
        }
        if (interval == 'platform') {
          data = {
              'id': that.deviceData.id,
              'fixed_report': that.argForm_2.fixed_report,
              'fixed_start_time': that.argForm_2.fixed_start_time,
              'report_interval': that.argForm_2.report_interval
          }
        }
        this.setArgInterval(interval, data, service);
      },

      setArgInterval(interval, data, service) {
        this.$http({
          method: 'post',
          url: 'api/equip/remoteSet',
          data: interval == 'platform' ? data : {
            'id': this.deviceData.id,
            'tcp_service': service
          }
        }).then(res => {
          if (res && res.data.result == "success") {
            this.$message({
              type: 'success',
              message: res.data.msg
            });

          }

        }).catch(error => {
          console.log(error);

        });
      }

    }
  }
</script>

<style scoped>
  .formBox {
    width:100%;
  }

  .inpu {
  	display: inline-block;
    vertical-align: middle;
  	width: 5rem;
  	height: 0.8rem !important;
  	line-height: 0.8rem;
    margin-right: 0.2rem;
    margin-top: 0.1rem;
  }

  .inpu /deep/ .el-input__inner {
  	padding-left: 4px;
  	padding-right: 4px;
    height: 0.8rem !important;
    line-height: 0.8rem!important;
    vertical-align:middle;
  }

  .inpu_2,
  .inpu_4 {
  	display: inline-block;
  	width: 3rem;
  	/*font-size: 0.3rem;*/
  	vertical-align: middle;
  	border: 1px solid #ccc;
  	border-radius: 5px;
  	height: 0.8rem;
  	line-height: 0.8rem;
  	text-align: center;
  	/* transform: translateY(-0.4rem); */
  	/*margin-top: 0.1rem;*/
  }

  .inpu_4 {
  	border: 0 !important;
  	/*font-size: 0.3rem;*/
  }

  .timeSelect{
    display: inline-block;
    vertical-align: middle;
    height: 0.8rem !important;
    line-height: 0.8rem!important;
    margin-top:0.1rem;
  }

  .timeSelect  /deep/  .el-input__inner{
  	padding-left:28px!important;
  	padding-right:2px!important;
    height: 0.8rem !important;
    line-height: 0.8rem!important;
  }

  .argForm{
    margin-top: 0.3rem;
    width:60%;
    line-height: 0.8rem;
    text-align: left;
    padding:0 0 0.2rem 0.1rem;
    /* border:1px solid red; */
  }

  .argForm /deep/ .el-form-item{
    margin:5px 10px!important;
    height:0.8rem;
    line-height: 0.8rem;
    vertical-align: middle;
  }

  .switchBox{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top:0.1rem;
    width:82px;
    height: 0.8rem;
    line-height: 0.8rem;
    overflow: hidden;
    /* border: 1px solid red; */
  }



  .mar_l {
    position:absolute;
    left:0.15rem!important;
    top:10px;
  }



  .oneSensor,
  .sensorHead {
  	height:1rem;
  	line-height:1rem;
  	padding: 0;
    font-size: 0.3rem;
    /* border:1px solid red; */

  }

  .sensorHead {
    width:60%;
  	margin: 0;
    height:0.8rem;
    line-height:0.8rem;
  	/* margin-top: 0.1rem; */
  	margin-bottom: 0.1rem;
  	border-bottom: 1px solid #111;

  }

  .oneSensor .yes,
  .oneSensor .no_grey {
  	width: 0.7rem;
  	height: 0.7rem;
  	box-shadow: none;
  	display:inline-block;
    vertical-align:top;
  	margin-top:1px;

  }

  .argForm /deep/ .el-radio .el-radio__label{
     padding-left:4px!important;
  }

  .mar_report {
  	transform: translate(-1rem, 0.1rem) !important;
  }

  .mar_report /deep/ .el-switch__label--right {
  	position: relative;
  	right: 60px !important;
  }

  .mar_report /deep/ .el-switch__label--left {
  	position: relative;
  	left: 90px !important;
  }

  .timeSelect  /deep/  .el-input__inner{
  	padding-left:25px!important;
  	padding-right:2px!important;
  }

  /* .ccidCode{
  	display:inline-block;
  	width:100%;
  	text-align:left;
  	color:deepskyblue;
  	cursor: pointer;
  } */

  .bottom_top{
  	margin-top:0.4rem;
    margin-left:0.2rem;
  	width:90%;
  	height:0.8rem;
  	line-height:0.8rem;
  	/* margin-bottom:0.1rem; */
  }

  .argment,
  .topic{
      float: left;
      width: 2.5rem;
      text-align: center;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
  	  cursor: pointer;
      /* background-color: #B7873C; */
  }

  .letLook{
  	position:absolute;
  	right:0.2rem;
  	top:0.38rem;
  	vertical-align: middle;
  	font-size:0.35rem;
  	color:#ccc;
  	cursor: pointer;

  }


</style>
